<style lang="less" scoped src="./prize.less"></style>
<script src="./prize.js"></script>

<template>
    <div class="make">
        <div class="make-container">
            <div class="drag-drop-box">
                <drag-drop-container :make-template="makeTemplate" active-sprite-index="-1" ref="dndContainer"></drag-drop-container>
            </div>
            <div class="editor">
                <Form :model="formData" :label-width="60">
                    <Row>
                        <FormItem label="模板">
                            <Select v-model="formData.modelid" style="width: 50%" filterable @on-change="modelChange">
                                <Option v-for="item in modelList" :key="item.id" :value="item.id">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                    </Row>
                    <Row>
                        <FormItem label="生成模式">
                            <Select v-model="formData.pattern" style="width: 50%" filterable>
                                <Option :key="0" :value="0">批量</Option>
                                <Option :key="1" :value="1">单个</Option>
                            </Select>
                        </FormItem>
                    </Row>
                    <div v-if="formData.pattern == 0">
                        <Row>
                            <FormItem label="主题">
                                <Cascader :data="themeList" :value="theme" trigger="click" filterable :clearable="false" :render-format="setTheme" @on-change="themeChangeMore" style="width: 50%" changeOnSelect ></Cascader>
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem label="单行人数">
                                <Select v-model="formData.perNum" style="width:20%">
                                    <Option v-for="item in numList" :value="item" :key="item">{{item}}</Option>
                                </Select>
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem label="">
                                <Button type="primary" @click="save">生成奖状</Button>
                                <Button type="ghost" style="margin-left: 10px" @click="reset">重置</Button>
                            </FormItem>
                        </Row>
                    </div>
                    <div v-if="formData.pattern == 1">
                        <Row>
                            <FormItem label="主题">
                                <Cascader :data="themeList" :value="theme" trigger="click" filterable :clearable="false" :render-format="setTheme" @on-change="themeChangeOne" style="width: 50%" changeOnSelect ></Cascader>
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem label="奖项">
                                <Select v-model="formData.diplomasId" :label-in-value="true" @on-change="dipChange" style="width: 50%">
                                    <Option v-for="item in diplomasList" :value="item.id" :key="item.id">{{item.name}}</Option>
                                </Select>
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem label="会员">
                                <Select v-model="formData.memberId" @on-change="memberChange" style="width: 50%">
                                    <Option v-for="item in allMember" :value="item.key" :key="item.key">{{item.name}}</Option>
                                </Select>
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem label="单行人数">
                                <Select v-model="formData.perNum" @on-change="numChange" style="width:20%">
                                    <Option v-for="item in numList" :value="item" :key="item">{{item}}</Option>
                                </Select>
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem label="">
                                <Button type="primary" @click="saveOne">生成奖状</Button>
                                <Button type="ghost" style="margin-left: 10px" @click="reset">重置</Button>
                            </FormItem>
                        </Row>
                    </div>
                </Form>
            </div>
        </div>
    </div>
</template>
